<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../_third-party/bootstrap/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../../_src/wm-custom.css" />
		<link rel="stylesheet" type="text/css" href="../../_src/navigation/tabs.css" />
	</head>
	<body>
		<ul id="myTab1" class="nav nav-tabs wm-tabs-bottom">
			<li>
				<a href="#tab1" data-toggle="tab">标签一</a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">标签二</a>
			</li>
			<li>
				<a href="#tab3" data-toggle="tab">标签三</a>
			</li>
		</ul>

		<br>

		<ul id="myTab2" class="nav nav-tabs wm-tabs-bottom">
			<li>
				<a href="#tab1" data-toggle="tab">标签一（123）</a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">标签二（456）</a>
			</li>
			<li>
				<a href="#tab3" data-toggle="tab">标签三（789）</a>
			</li>
		</ul>

		<br>

		<ul id="myTab3" class="nav nav-tabs wm-tabs-all">
			<li>
				<a href="#tab1" data-toggle="tab">标签一</a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">标签二</a>
			</li>
			<li>
				<a href="#tab3" data-toggle="tab">标签三</a>
			</li>
		</ul>

		<br>

		<ul id="myTab4" class="nav nav-tabs wm-tabs-all">
			<li>
				<a href="#tab1" data-toggle="tab">标签一<span class="wm-tabs-close">&times;</span></a>
			</li>
			<li>
				<a href="#tab2" data-toggle="tab">标签二<span class="wm-tabs-close">&times;</span></a>
			</li>
			<li>
				<a href="#tab3" data-toggle="tab">标签三<span class="wm-tabs-close">&times;</span></a>
			</li>
			<li>
				<a href="javascript:void(0);"><span class="wm-tabs-add">+</span></a>
			</li>
		</ul>

		<br>
		<div class="col-sm-1 cols-xs-2">
			<ul class="nav nav-tabs vertical-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">标签一</a></li>
			    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">标签二</a></li>
			    <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">标签三</a></li>
			</ul>
		</div>
		<div class="tab-content wm-tabs-content">
			<div class="tab-pane fade" id="tab1">
				<p>标签一内容</p>
			</div>
			<div class="tab-pane fade" id="tab2">
				<p>标签二内容</p>
			</div>
			<div class="tab-pane fade" id="tab3">
				<p>标签三内容</p>
			</div>
		</div>

		<script src="../../_third-party/jQuery/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../_third-party/bootstrap/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../_src/navigation/tabs.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$('#myTab1 li:eq(0) a').tab('show');
				$('#myTab2 li:eq(0) a').tab('show');
				$('#myTab3 li:eq(0) a').tab('show');
				$('#myTab4 li:eq(0) a').tab('show');
			});
		</script>
	</body>
</html>
